// app main
$sidebar: 50px;

// Color Palette
$theme-color: #1B1F8F;
$theme-color-1: #1B1F8F;
$gray: #8e8e93;
$gray-1: #ededed;
$gray-2: #c8c9cc;
$gray-3: #646566;
$gray-4: #f8f8f8;
$gray-5: #383434;
$gray-6: #969799;
$gray-7: #ebedf0;
$gray-8: #EDEDED;
$gray-9: #F6F7FB;
$gray-10: #E4E4E4;
$gray-11: #999999;
$gray-12: #666666;
$gray-13: #F4F4F4;
$gray-14: #F7F7F7;
$gray-15: #E9E9F0;
$gray-16: #ECEEF5;
$gray-17: #8083A3;
$gray-18: #EAEAEA;
$gray-19: #8088a6;
$gray-20: #F4F6FC;
$gray-21: #E1E1E1;
$gray-22: #4D4D4D;
$white: #ffffff;
$white-1: #ffffff;
$black: #000;
$black-1: #333333;
$black-2: #323233;
$red: #ff0000;
$red-1: #f88383;
$red-2: #FF5B5B;
$green: #5AD8A5;
$yellow: #ffff00;
$yellow-1: #E8D255;

// font-size
$font-xs: 12px;
$font-sm: 14px;
$font-md: 16px;
$font-lg: 20px;

$font-size-xs: 12px;
$font-size-sm: 14px;
$font-size-md: 16px;
$font-size-lg: 18px;
$font-weight-bold: 600;
$line-height-xs: 14px;
$line-height-sm: 18px;
$line-height-md: 20px;
$line-height-lg: 22px;

$base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
  Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB',
  'Microsoft Yahei', sans-serif;

// Size
$size-xs: 10px;
$size-sm: 20px;

// Padding
// Padding
$padding-base: 8px;
$padding-xs: $padding-base * 2;
$padding-sm: $padding-base * 3;
$padding-md: $padding-base * 4;
$padding-lg: $padding-base * 6;
$padding-xl: $padding-base * 8;

// Margin
$margin-base: 8px;
$margin-xs: $margin-base * 2;
$margin-sm: $margin-base * 3;
$margin-md: $margin-base * 4;
$margin-lg: $margin-base * 6;
$margin-xl: $margin-base * 8;

// Border
$b-radius-xs: 5px;
$b-radius-sm: 8px;
$b-radius-md: 10px;
$b-radius: 50%;
$b-color: $gray-1;

$border-width-base: 1px;
$border-radius-xs: 2px;
$border-radius-sm: 4px;
$border-radius-md: 8px;
$border-radius-lg: 10px;
$border-radius-max: 999px;

// Media queries breakpoints
// Extra small screen / phone
$screen-xs: 480px;
$screen-xs-min: $screen-xs;

// Small screen / tablet
$screen-sm: 576px;
$screen-sm-min: $screen-sm;

// Medium screen / desktop
$screen-md: 768px;
$screen-md-min: $screen-md;

// Large screen / wide desktop
$screen-lg: 992px;
$screen-lg-min: $screen-lg;

// Extra large screen / full hd
$screen-xl: 1200px;
$screen-xl-min: $screen-xl;

// Extra extra large screen / large desktop
$screen-xxl: 1600px;
$screen-xxl-min: $screen-xxl;

// provide a maximum
$screen-xs-max: #{$screen-sm-min - 1px};
$screen-sm-max: #{$screen-md-min - 1px};
$screen-md-max: #{$screen-lg-min - 1px};
$screen-lg-max: #{$screen-xl-min - 1px};
$screen-xl-max: #{$screen-xxl-min - 1px};